<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>查看用户</span>
        <el-button type="primary" @click="router.push('/UserManager/Index')">返回列表</el-button>
      </div>
    </template>

    <div v-loading="loading">
      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">姓名：</el-col>
        <el-col :span="21">{{ userDetail.name }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">用户名：</el-col>
        <el-col :span="21">{{ userDetail.loginName }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">账号状态：</el-col>
        <el-col :span="21">{{ userDetail.status == 1 ? '正常' : userDetail.status == 0 ? '已禁用' : '' }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">在职状态：</el-col>
        <el-col :span="21">{{ userDetail.jobState == 1 ? '在职' : userDetail.jobState == 0 ? '离职' : '' }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">工号：</el-col>
        <el-col :span="21">{{ userDetail.jobNumber }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">部门：</el-col>
        <el-col :span="21">{{ userDetail.orgName }}</el-col>
      </el-row>
      
      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">职位：</el-col>
        <el-col :span="21">{{ userDetail.jobTitle }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">省份：</el-col>
        <el-col :span="21">{{ userDetail.province }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">性别：</el-col>
        <el-col :span="21">{{ userDetail.gender == 1 ? '男' : userDetail.gender == 2 ? '女' : '未知' }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">手机号：</el-col>
        <el-col :span="21">{{ userDetail.phone }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">生日：</el-col>
        <el-col :span="21">{{ userDetail.birthDate }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">邮箱地址：</el-col>
        <el-col :span="21">{{ userDetail.email }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">注册时间：</el-col>
        <el-col :span="21">{{ format(userDetail.createTime) }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">角色：</el-col>
        <el-col :span="21">
          <span v-for="(item,index) in roleDetail" :key="index">{{item.name}}；</span>
        </el-col>
      </el-row>
    </div>

    <div class="add-button">
      <el-row class="detail-item">
        <el-col :span="3" class="detail-label" style="margin-right: 14px;">
          <el-button @click="router.push('/UserManager/Index')">返回</el-button>
        </el-col>
        <el-col :span="20">
          <el-button @click="goEditUser" type="primary" v-if="getBtnPermission('btn:editUser')">编辑</el-button>
        </el-col>
      </el-row>      
      
    </div>
  </el-card>
</template>

<script>
export default { name: "userDetail" }
</script>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { http } from '@/utils/http/index';
import { format } from '@/plugins/moment.js'
import { useAuthStore } from '@/stores/modules/auth.js';

/* 路由 */
const router = useRouter()

const authStore = useAuthStore()

/* 所有按钮权限 */
const btnPermissionList = ref([])
btnPermissionList.value = authStore.base_auth_tree.find(item => item.controlName == 'btn_permission')?.children

/* 查询是否有权限 */
const getBtnPermission = (name) => {
  let flag = false
  if( btnPermissionList.value.find(item => item.controlName == name && item.selected == 1) ) {
    flag = true
  }
  return flag
}

onMounted(() => {
  if(router.currentRoute.value.query.id){
    getuserDetail()
  }
})

/* 详情数据加载动画 */
const loading = ref(false)

/* 详情数据 */
const userDetail = ref({})
const roleDetail = ref([])

/* 查询详情 */
const getuserDetail = () => {
  loading.value = true
  http.$GET("/UserManager/GetUserById", { Id: router.currentRoute.value.query.id }).then(res => {
    loading.value = false
    if (res.isError) return
    if (!res.result) return
    userDetail.value = res.result.content.user
    roleDetail.value = res.result.content.roles
  }).catch(err => {
    loading.value = false
    ElMessage.warning("查询失败")
  })
}

/* 跳转编辑 */
const goEditUser = () => {
  router.push({
    path: "/UserManager/UserEdit",
    query: { type: 'edit', id: router.currentRoute.value.query.id }
  })
}
</script>

<style lang='scss' scoped>
@import "@/assets/styles/backendElement.scss";
</style>